<template>
	<view>
		<view class="top-box">
			<view class="top">
				<view class="top-box-left">
					<image :src="Img" mode=""></image>
				</view>
				<view class="top-box-right">
					<text class="bang heig ">{{name}}</text>
					<text class="wyy   heig">网抑云音乐</text>
					<text class="predu  heig">云音乐中每天热度上升最快的100首单日曲，每日更新。>
					</text>
				</view>
			</view>
			<view class="dwon-box">
				<button type="primary" @tap="shares">分享给微信好友 </button>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				Img: ""
			};

		},
		onLoad() {

			uni.request({
				url: "https://autumnfish.cn/toplist/detail",
				success: res => {
					// console.log(res.data.list)
					this.list = res.data.list
					this.Img = res.data.list[0].coverImgUrl
					this.name = res.data.list[0].name
				}
			})
		},
		methods: {
			// 跳转
			songsheet(e) {
				console.log(e)
				var newsid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "../songsheet/songsheet"
				})
			},
			// 分享
			shares(e) {
				console.log(e)
				var newsid = e.currentTarget.id;

				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png',
					title: 'uniapp',
					miniProgram: {
						id: 'gh_abcdefg',
						path: 'pages/index/index',
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});

			}
		}
	}
</script>

<style>
	.top-box {
		width: 750rpx;
		height: 624rpx;
		box-sizing: border-box;
		opacity: 1;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius:30rpx;
		background-color: #1477d9;
	}

	.top {
		position: relative;
		top: 100rpx;
		width: 750rpx;
		height: 312x;
		/* border: 1px solid red; */
	}

	.top-box-left {
		width: 312rpx;
		height: 312rpx;
		/* border: 1px solid red; */
	}

	.top-box-left image {
		width: 100%;
		height: 100%;
		border-radius: 25rpx;
		margin-left: 10rpx;
	}

	.top-box-right {
		position: absolute;
		top: 0;
		right: 0;
		width: 400rpx;
		height: 312x;
		/* border: 1px solid red; */
	}

	.bang {
		display: block;
		font-size: 45rpx;
		color: #ffffff;
	}

	.wyy {
		display: inline-block;
		font-size: 35rpx;
		color: #e5e5e5;
	}

	.predu {
		display: block;
		font-size: 25rpx;
		color: #cbcbcb;
	}

	.heig {
		margin-bottom: 20rpx;
	}

	.dwon-box {
		position: relative;
		bottom: -132rpx;
		width: 350rpx;
		height: 150rpx;
		margin: 0 auto;
	}

	.dwon-box button {
		border-radius: 50rpx;
		background-color: #aeb4ff;
		color: #ffffff;
	}
</style>
